<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <div>{{info}}</div>
        <div class="box1" ref="box1"></div>
        <div class="box2" v-if="show">{{info}}</div>
        <button @click="show=!show">更改show的值</button>
        <button @click="del">销毁vue实例</button>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                info:'后面看得见吗？',
                show:true
            },
            methods: {
                test(){
                    console.log('testttt');
                },
                del(){
                    // vue实例上的方法  销毁vue实例
                    // v-if
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log(this);
                console.log('beforeCreate');
                // data当中的属性不能获取
                // methods 计算属性 侦听器 根元素 都不能获取到
                // 不能获取更元素不能操作DOM
                console.log(this.info);
                console.log(this.test);
                console.log(this.$refs.box1);
                console.log(this.$el);//不能
                console.log(this.$root);//可以
            },

            created() {
                /* vue实例创建后  data上的数据 方法 计算属性 侦听器 初始化完成 
                但是不能获取根元素  不能操作DOM
                */
                console.log('created');
                console.log(this.$el);//不能
                console.log(this.$refs.box1);//不能
                // console.log(this.test);
                this.test();//可以
                console.log(this.info);//可以

            },
            beforeMount() {
                /* 挂载前  data 方法 侦听器 监听 都能获取
                $el根元素 能获取到
                DOM不能
                
                */
                console.log('beforeMount');
                console.log(this.$el);//能
                console.log(this.$refs.box1);//不能
                // console.log(this.test);
                this.test();//可以
                console.log(this.info);//可以
            },
            /* mounted只执行一次 */
            mounted() {
               /*  挂载前  data 方法 侦听器 监听 都能获取
                $el根元素 能获取到
                能操作DOM */
                console.log('mounted');
                console.log(this.$el);//不能
                console.log(this.$refs.box1);
                // console.log(this.test);
                this.test();//可以
                console.log(this.info);//可以
            },
            // 会触发无数次
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            },
            
        })

        /* 
        vue生命周期钩子函数
        beforeCreate 创建前
        created 创建后  发送ajax请求
        beforeMount  挂载前
        mounted  挂载后  发送ajax请求
        beforeUpdate  更改前
        Updated更改后
        beforeDestroy  销毁前  做一些收尾工作例如清除无用的定时器
        destroyed  销毁后
        

        
        */
    </script>
    
</body>
</html>